<style scoped>
 .ivu-tag-checked{
   background-color: #2d8cf0; 
 }
 .ivu-tag-checked .ivu-tag-text{
   color: #fff;
 }
 .li-checked{
   background: #2d8cf0;
   color: #fff;
 }
</style>
<template>
  <Modal :title="modalTitle" v-model="isShow" :mask-closable='false' :width="500" @on-cancel="cancelReview">
    <template>
      <!-- <Tag v-bind="count" v-for="item in count" :key="item.id" :name="item.id" checkable :checked="item.checked"  @on-change="tagClick" style="width:80px;height:24px;line-height:24px;text-align:center;border: 1px solid #2d8cf0;">{{item.name}}</Tag> -->
      <ul style="list-style-type:none;">
        <li v-bind="count" v-bind:class="[item.checked ? 'li-checked' : '']" v-for="item in count" :key="item.id" :name="item.id"  @click="tagClick(item)" style="cursor:pointer;width:80px;height:24px;line-height:24px;text-align:center;border: 1px solid #2d8cf0;display:inline-block;margin-right:10px;margin-bottom:10px;border-radius:3px;">{{item.name}}</li>
      </ul>
  </template>

  <div slot="footer">
      <Button type="text" @click="cancelReview">取消</Button>
      <Button type="primary" @click="submitReview">确定</Button>
    </div>
  
  </Modal>
</template>

<script>

export default {
  name: "tag-modal",
  props:{
    // isShow: {
    //   type: Boolean,
    //   default: false
    // },
  },
  data() {
    return {
      isShow: false,
      isChecked: false,
      modalTitle: "",

      // count: [0, 1, 2],
      count: [{id:'001',checked:false,name:'HOT'}, {id:'002',checked:false,name:'跟团'}, {id:'003',checked:false,name:'自由行'},
              {id:'004',checked:false,name:'活动'}, {id:'005',checked:false,name:'特价'}, {id:'006',checked:false,name:'新品'},
              {id:'007',checked:false,name:'热销'}, {id:'008',checked:false,name:'促销'}, {id:'009',checked:false,name:'抢购'},
              {id:'010',checked:false,name:'包车游'}, {id:'011',checked:false,name:'休闲游'}, {id:'012',checked:false,name:'观光游'}],
    
      submitLoading: false
    };
  },
  methods: {
    // openReviewModal(isOpen,reviewObj){
    openReviewModal(currSelectedTag){  
      // let reviewObject = reviewObj;
      // if(reviewObject){
      //   this.modalTitle = reviewObject.title;
      //   this.reviewForm.reviewId = reviewObject.reviewId;
      //   let status = reviewObject.status;
      //   this.reviewForm.reviewStatus = status;
      //   (status === "-1") ? (this.reviewForm.nopassReasonVisible = true) : (this.reviewForm.nopassReasonVisible = false);
      //   this.reviewForm.nopassReason = reviewObject.reason;
      // }

      this.modalTitle="标签选择";
      this.isShow  = true;

      let currSelectedTagArr = currSelectedTag;
      let currSelectedTagIds = [];
      if(currSelectedTagArr.length > 0 ){
        currSelectedTagArr.forEach(function(eachItem){  
          currSelectedTagIds.push(eachItem.id);
        });
      }
      console.log(currSelectedTagIds);
      this.count.forEach(function(eachItem){
        // console.log(eachItem.id);
        // console.log(currSelectedTagIds.indexOf(eachItem.id));
        if(currSelectedTagIds.indexOf(eachItem.id) == -1){
           eachItem.checked = false;
        }else{
          eachItem.checked = true;
        }
      });

      console.log(this.count);

      
    },

    tagClick(item){
      item.checked = !item.checked;
      // this.count.forEach(function(eachItem){  
      //   if(eachItem.id === name){ //设置点击值
      //     eachItem.checked = chechedValue;
      //   }
      // });
    },

    cancelReview() {
      this.isShow =  false;
      this.$emit('on-close',true);
    },
    submitReview(){
      let url = "";

      //返回选中值
      let resCheckedArr = [];
      this.count.forEach(function(eachItem){  
        if(eachItem.checked == true){
          resCheckedArr.push(eachItem);
        }
      });

      this.$emit('on-tag-checked',resCheckedArr);
      this.isShow = false;

      // url = "/goods_item/review";
      // let reviewObj = {};
      // reviewObj.id = this.reviewForm.reviewId;
      // let status = this.reviewForm.reviewStatus;
      // reviewObj.status = status;
      // (status === "-1") ? (reviewObj.reason = this.reviewForm.nopassReason) : (reviewObj.reason = '');
      // console.log(reviewObj);
      // this.submitLoading = true;
      // this.putRequest(url, reviewObj).then(res => {
      //   this.submitLoading = false;
      //   if (res.success === true) {
      //     this.$Message.success("审核操作成功");
      //     this.isShow = false;
      //     this.$emit('on-review-success',true);
      //   }
      // });
    }

  },
  mounted() {
  }
};
</script>